feat: ウインドウ幅が狭い場合タイトルバーの表示が崩れる問題の低減 #2707
Conversation
|
🚀 プレビュー用ページを作成しました 🚀 更新時点でのコミットハッシュ： |
There was a problem hiding this comment.
Pull Request Overview
This PR addresses title bar display issues when the window width is narrow by implementing a collapsible toolbar system. When toolbar space is insufficient, some buttons are folded into an overflow menu to prevent layout breakage.
- Implements button collapsing mechanism using intersection observer to hide buttons that don't fit
- Adds overflow menu ("その他") to contain hidden buttons with teleport functionality
- Updates menu item disable logic to handle additional locking states
Reviewed Changes
Copilot reviewed 3 out of 10 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| MenuBar.vue | Main implementation of collapsible toolbar with intersection observer and overflow menu |
| MenuItem.vue | Adds support for reloadingLock state in menu item disable logic |
| MenuButton.vue | Updates disabled menu item check to include explicit disabled property |
| if (element.dataset.index == undefined) { | ||
| throw new Error("element.dataset.index is undefined"); | ||
| } | ||
| isHidden.value[parseInt(element.dataset.index)] = !entry.isIntersecting; |
There was a problem hiding this comment.
parseInt without a radix parameter can lead to unexpected behavior. Use parseInt(element.dataset.index, 10) to explicitly specify base 10.
| isHidden.value[parseInt(element.dataset.index)] = !entry.isIntersecting; | |
| isHidden.value[parseInt(element.dataset.index, 10)] = !entry.isIntersecting; |
There was a problem hiding this comment.
これはなくてもいい気がします。
element.dataset.indexの値はMenubar.vue内で決まるので想定外の文字列が来ること自体を想定する必要はないと思います。
また、想定外の値が来ることを想定するなら値が配列の範囲内かの検証までやらないと不十分だと思います。
|
@sevenc-nanashi ping （いったんただのコメントです） |
|
手元でCSSを使って中央寄せできないか試しているんですけど、うまくいってないんですよね... |
fix: fix error message Co-authored-by: Copilot <[email protected]>
Co-authored-by: Copilot <[email protected]>
3 participants
内容
タイトルバーの領域が狭くツールバーの表示領域が不足している場合ボタンの一部を折りたたむようにします。
これによりウインドウの幅が狭いときや開いているプロジェクトファイル名が長い場合にタイトルバーの表示が崩れてしまう問題を低減します。
ズームが100%のときはウインドウを最小幅にしても崩れないはずです。(倍率を上げた場合は崩れてしまいます。)
スクリーンショット・動画など
その他
ウインドウタイトルの位置が少しずれてしまいました。
ウインドウの中央ではなくツールバーと右のボタンの中央になってしまっています。
CSSで空間を無駄なく使いつつウインドウの中央に配置するのは自分では無理そうなので妥協しました。